<template>
  <div class="main">
    <div class="shadow"></div>
    <div class="bigbox">
      <div class="topimg">
        <div
          style="background: #F8FCFF; display: flex;align-items: center;flex-direction: column;
        justify-content: center;"
        >
          <div
            style="display: flex; align-items: center;margin-bottom: 0.08rem;"
          >
            <img src="../../../assets/image/seller/rights.png" alt="" /><span
              style="font-family: PingFang SC;
font-size: 0.18rem;color: #399EF1;
font-weight: bold;"
              >功能欧益</span
            >
          </div>
          <div>各种专享特权与便捷服务</div>
        </div>
        <div
          style="background: #FFFAF7; display: flex;align-items: center;flex-direction: column;
        justify-content: center;"
        >
          <div
            style="display: flex; align-items: center;margin-bottom: 0.08rem;"
          >
            <img src="../../../assets/image/seller/chengxin.png" alt="" /><span
              style="font-family: PingFang SC;
font-size: 0.18rem;color: #EC6C15;
font-weight: bold;"
              >功能欧益</span
            >
          </div>
          <div>
            诚信保证金：3000元 <span style="color: #E22A1F;">去开通>></span>
          </div>

          <div>
            服务费：1000元 <span style="color: #E22A1F;">去开通>></span>
          </div>
        </div>
        <div
          style="background: #F7FFFE; display: flex;align-items: center;flex-direction: column;
        justify-content: center;"
        >
          <div
            style="display: flex; align-items: center;margin-bottom: 0.08rem;"
          >
            <img src="../../../assets/image/seller/xunzhang.png" alt="" /><span
              style="font-family: PingFang SC;
font-size: 0.18rem;color: #399EF1;
font-weight: bold;"
              >功能欧益</span
            >
          </div>
          <div>各种专享特权与便捷服务</div>
        </div>
        <div
          style="background: #F5F7F9; display: flex;align-items: center;flex-direction: column;
        justify-content: center; "
        >
          <div
            style="display: flex; align-items: center;margin-bottom: 0.08rem;"
          >
            <img src="../../../assets/image/seller/anquan.png" alt="" /><span
              style="font-family: PingFang SC;
font-size: 0.18rem;color: #A7ADB8;
font-weight: bold;"
              >功能欧益</span
            >
          </div>
          <div>各种专享特权与便捷服务</div>
        </div>
      </div>
      <div class="mainbox">
        <div class="itembox" v-for="item in list">
          <div
            v-for="subitem in item"
            class="item"
            :style="{
              color:
                subitem === '√'
                  ? '#07C160'
                  : subitem === '×'
                  ? '#FF4D4F'
                  : ' #3D3D3Ds',
              'font-weight':
                subitem == '系统资源' ||
                subitem == '商品资源管理' ||
                subitem == '广告推广服务' ||
                subitem == '交易代发货服务' ||
                subitem == '常规业务服务' ||
                subitem == '服务与支持' ||
                subitem == '服务与支持' ||
                subitem == '合作'
                  ? 'bold'
                  : 'normal',
              'font-size':
                subitem == '系统资源' ||
                subitem == '商品资源管理' ||
                subitem == '广告推广服务' ||
                subitem == '交易代发货服务' ||
                subitem == '常规业务服务' ||
                subitem == '服务与支持' ||
                subitem == '服务与支持' ||
                subitem == '合作'
                  ? '0.18rem'
                  : '0.14rem'
            }"
          >
            {{ subitem }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import validateCode from '@/components/ValidateCode'
export default {
  components: {
    validateCode
  },
  created () {},
  data () {
    return {
      list: [
        // 47个数组
        ['系统资源', '', '', ''],
        ['店铺二级域名设置', '√', '√', '×'],
        ['资源储存空间', '无限', '20G', '500M'],
        ['商品资源管理', '', '', ''],
        ['上架商品数量', '不限', '仅可上架一款', '×'],
        ['店铺模板', '诚信商专属店铺', '×', '×'],
        ['店铺身份标识', '√', '×', '×'],
        ['店铺装修', '诚信商专属店铺', '普通', '普通'],
        ['搜索店铺', '优先展示', '参与展示', '×'],
        ['搜索商品', '优先展示', '参与展示', '×'],
        ['关键词搜索', '优先展示', '参与展示', '×'],
        ['商品货源优先展示', '高', '中', '低'],
        ['独立栏目', '√', '×', '×'],
        ['商品手动发布', '√', '√', '×'],
        ['商品快捷发布', '√', '√', '×'],
        ['图片包关联商品', '免费', '免费', '×'],
        ['商品信息修改', '√', '√', '×'],
        ['商品展示', '√', '√', '×'],
        ['商品货源保留时长', '24个月', '12个月', '1个月'],
        ['商品货源搜索查找', '√', '√', '×'],
        ['商品货源展示曝光', '多', '少', '一个月'],
        ['广告商品补位', '可补位', '×', '×'],
        ['广告推广服务', '', '', ''],
        ['广告图修改', '免费1次', '×', '×'],
        ['广告报名', '优先参与', '可参与部分', '×'],
        ['首页大轮播图广告位', '9折', '×', '×'],
        ['实力商家排名广告位', '9折', '×', '×'],
        ['轮播图下方图片广告位', '9折', '×', '×'],
        ['轮播图右侧图片广告位', '9折', '×', '×'],
        ['B区店铺广告位', '9折', '×', '×'],
        ['B区商品广告位', '9折', '×', '×'],
        ['交易代发货服务', '', '', ''],
        ['订单管理', '√', '×', '×'],
        ['常规业务服务', '', '', ''],
        ['修改店铺二级域名', '免费修改1次', '免费修改1次', '×'],
        ['门牌', '免费', '×', '×'],
        ['名片', '免费1次', '×', '×'],
        ['二维码', '免费', '×', '×'],
        ['培训', '', '', ''],
        ['邮件客服', '6小时内回复', '24小时内回复', '1个月'],
        ['在线客服', '√', '√', '√'],
        ['合作', '', '', ''],
        ['商务合作', '优先', '√', '×'],
        ['快递合作', '优先', '√', '×'],
        ['电商资源扶持', '√', '√', '×'],
        ['直播资源对接', '√', '√', '×']
      ]
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.main {
  width: calc(100%);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: #ffffff;
  .shadow {
    flex-shrink: 0;
    width: 100%;
    height: 0.2rem;
    // background: #F5F5F5;
    background: linear-gradient(0deg, #ffffff, #f5f5f5);
  }
  .bigbox {
    border: 0.01rem solid #e8e8e8;
    .topimg {
      display: flex;
      align-items: center;
    }
    .topimg > div {
      width: 4.04rem;
      height: 1.4rem;
      font-family: PingFang SC;
      font-size: 0.14rem;
      font-weight: 500;
    }
    .mainbox {
      .itembox {
        display: flex;
        align-items: center;
        justify-content: center;
        .item {
          width: 25%;
          height: 0.48rem;
          border: 0.01rem solid #e8e8e8;
          font-family: PingFang SC;
          font-size: 0.14rem;
          font-weight: 500;
          text-align: center;
          line-height: 0.48rem;
        }
      }
    }
  }
}
</style>
